<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
</head>
<body>
    <div id="root">
    
    </div>
    <script type="text/babel">
        // 定义一个不传参的函数组件
        // 函数的首字母要大写
        // function Welcome() {
        //     return <h1>hello world!</h1>
        // }

        // let Welcome = function() {
        //     return <h1>hello world!</h1>
        // }

        // let Welcome = ()=>{return <h1>hello world!</h1>};

        // 定义传参的函数组件
        // function WelcomeName(props) {
        //     return <h1>hello,{props.name},你的年龄是{props.age}</h1>;
        // }

        // let WelcomeName = (props)=>{
        //     return <h1>hello,{props.name},你的年龄是{props.age}</h1>;
        // }

        // 参数只能作为对象，里面可以有多种属性
        let WelcomeName = ({name,age})=>{
            return <h1>hello,{name},你的年龄是{age}</h1>;
        }

        // 组件嵌套
        function App() {
            return (
                <div>
                    <WelcomeName name="lyc" age={'8岁'} />  
                    <WelcomeName name="ccy" age={44} />  
                    <WelcomeName name="lby" age='46' />  
                </div>
            )
        }

        // 这里的字符串要加引号，可省略大括号，变量用大括号包围，数字可引号也可大括号
        // ReactDOM.render(<WelcomeName name={'wwj'} age={22}/>, document.getElementById('root'));


        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>